<template>
  <view>
    <nav-bar title="订单详情"></nav-bar>
    <scroll-view scroll-y :style="{ height: scrollHeight }">
      <view class="top-info">
      <view class="top-time">
        <view class="time-left">
          <text class="label" :style="{ color: statusConfig[orderDetail.orderState].color }">
          {{ statusConfig[orderDetail.orderState].text }}
          </text>
        </view>
        <view class="time-right">
         <image class="time-img" :src="baseIconUrl + '/userIcon/icon_pay.png'" mode="aspectFill"/>
        </view>
      </view>
      <view class="message" v-if="orderDetail.orderType === 3">
        <view class="message-box">
          <view class="message-user">
            <text class="user">{{ orderDetail.receiverName }}</text>
            <text class="phone">{{ orderDetail.receiverPhone }}</text>
          </view>
          <view class="address">{{ orderDetail.receiverAddress }}</view>
        </view>
      </view>
      <view class="equipment">
        <view class="top">
          <view class="top-left">
            <image class="top-img" :src="orderDetail.goodPhoto.includes('http') ? orderDetail.goodPhoto : baseUrl + orderDetail.goodPhoto || baseImgUrl + '/userImg/img_service_big.png'" mode="aspectFill" />
          </view>
          <view class="top-right">
            <view class="title">{{ orderDetail.goodName || '--' }}</view>
            <view class="number">
              <view class="money">￥{{ Number(orderDetail.price) }}</view>
              <view class="frequency">×{{ orderDetail.totalNum }}</view>
            </view>
          </view>
        </view>
        <view class="equipment-detail">
          <view class="box-detail">
            <text class="detail-title">备注</text>
            <text>{{ orderDetail.remark || '无' }}</text>
          </view>
          <view class="box-detail">
            <text class="detail-title">数量</text>
            <text>{{ orderDetail.totalNum }}</text>
          </view>
          <view class="box-detail">
            <text class="detail-title">总计</text>
            <text class="total">￥{{ Number(orderDetail.totalFee)  }}</text>
          </view>
        </view>
      </view>
        <view class="order-detail">
          <view class="order-title">订单详情</view>
          <view class="equipment-detail">
            <view class="box-detail">
              <text class="detail-title">订单号</text>
              <text>{{ orderDetail.orderNum }}</text>
            </view>
            <view class="box-detail">
              <text class="detail-title">创建时间</text>
              <text>{{ orderDetail.createData.slice(0,10) }}</text>
            </view>
            <view class="box-detail">
              <text class="detail-title">支付方式</text>
              <text>微信支付</text>
            </view>
            <view class="box-detail">
              <text class="detail-title">支付时间</text>
              <text>{{ orderDetail.payTime || '--' }}</text>
            </view>
          </view>
        </view>
    </view>
    </scroll-view>

  </view>
</template>

<script>
  import { baseImgUrl,baseUrl,baseIconUrl } from '@/config'
  import api_user from '@/api/user'
  export default {
    name: "OrderDetail",
    data() {
      return {
        baseUrl,
        baseImgUrl,
        baseIconUrl,
        orderDetail: {},
        scrollHeight: "",
        orderStatus: "",
        statusConfig: {
          1:{ text:'待发货', color:'#fff' },
          2:{ text:'配送中', color:'#fff' },
          3:{ text:'已收货', color:'#fff' },
        },
        orderId:null
      }
    },
    onLoad(options) {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 0 + "px"
      this.orderStatus = options.orderStatus || ""
      this.orderId = options.id
      this.getOrderDetail()
    },
    methods: {
      getOrderDetail() {

        const params = {
          id: this.orderId
        }
        api_user.fetchOrderDetail(params).then(res => {
          if (res.code !== 200) return
          this.orderDetail = res.data
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.top-info {
  padding: 50rpx 30rpx 0;
  background: linear-gradient(to bottom, #5992e3, transparent);
  .top-time {
    padding: 60rpx 60rpx 0 60rpx;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .time-left {
      font-size: 36rpx;
      font-weight: 600;
    }
    .time-right{
      width: 120rpx;
      height: 120rpx;
      .time-img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .message {
    width: 690rpx;
    border-radius: 16rpx;
    background: #ffffff;
    padding: 30rpx 0 30rpx 30rpx;
    margin-top: 40rpx;
    .message-box {
      width: 484rpx;
      .message-user {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        color: #000;
        font-weight: 600;
        .phone {
          margin-left: 20rpx;
          margin-top: 7rpx;
        }
      }
      .address {
        font-size: 24rpx;
        color: #999;
        margin-top: 20rpx;
      }
    }
  }
  .equipment {
    width: 690rpx;
    border-radius: 16rpx;
    background: #ffffff;
    padding: 30rpx;
    margin-top: 30rpx;
    .top {
      display: flex;
      .top-left {
        .top-img {
          width: 240rpx;
          height: 240rpx;
          border-radius: 20rpx;
        }
      }
      .top-right {
        margin-left: 28rpx;
        .title {
          width: 352rpx;
          height: 186rpx;
          font-size: 32rpx;
          color: #333;
          font-weight: 600;
        }
        .number {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .money {
            font-size: 32rpx;
            color: #ff513a;
          }
          .frequency {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
  .equipment-detail {
    display: flex;
    flex-direction: column;
    font-size: 28rpx;
    color: #333;
    .detail-title {
      color: #999;
    }
    .box-detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15rpx;
    }
    .total {
      color: #ff513a;
    }
  }
  .order-detail {
    width: 690rpx;
    border-radius: 16rpx;
    background: #ffffff;
    padding: 30rpx;
    margin-top: 30rpx;
    .order-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
    }
    .order-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15rpx;
    }
  }
}
</style>
